<script setup lang="ts">

import {onMounted, ref} from "vue";
import { query } from "@/api/receipt/receipt"
import {getUser} from "@/utils/session";
import router from "@/router";
import {exportExcel,batchDelete} from "@/api/receipt/receipt";
import host from "@/utils/env";
import {ElMessage, ElMessageBox} from "element-plus";

const tableData = ref([])
const page = ref(1);//默认第一页
const pageSize = ref(10);//每页显示条数
const total = ref(0);//总条数
/**
 * 分页
 * @param pg 第几页
 */
function chgpg(pg) {
  page.value = pg;
  initData();
}
/**
 * 分页
 * @param pgSize 每页多少条
 */
function chg(pgSize) {
  pageSize.value = pgSize;
  page.value = 1;
  initData();
}
//条件
const filters = ref({
  names: "",
  billDate: ""
})
function initData() {
  if (filters.value.billDate == null) {
    filters.value.billDate = ""
  }
  let data = {
    "page": page.value,
    "pageSize": pageSize.value,
    "names": filters.value.names,
    "begin": filters.value.billDate[0],
    "end": filters.value.billDate[1],
    "eid":getUser().eid
  }
    query(data)
      .then(res=>{
        if (res.code==200){
          tableData.value = res.data.list
          page.value = res.data.page
          pageSize.value = res.data.pageSize
          total.value = res.data.total
        }
      })
}
//导出
async function exportExc(){
  let res = await exportExcel({})
  if (res.code == 200) {
    let url = host + res.data;
    window.open(url)
  }
}
//单个删除
function deletePur(row) {
  let data = row.id
  ElMessageBox.confirm(
    '确认删除该企业信息吗，删除后该企业的所有数据将无法恢复！',
    '企业删除确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      if (data.length==0){
        ElMessage({
          type: 'warning',
          message: '请选择要删除的采购单',
        })
        return
      }
      let res = await batchDelete(data)
      initData()
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      }
    })
    .catch(() => {

    })
}
//批量删除
let rmData = []

function removeId(ids) {
  let data = [];
  for (let i = 0; i < ids.length; i++) {
    data.push(ids[i].id)
  }
  rmData = data
}

function removeById() {
  ElMessageBox.confirm(
    '确认删除该企业信息吗，删除后该企业的所有数据将无法恢复！',
    '企业删除确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      if (rmData.length==0){
        ElMessage({
          type: 'warning',
          message: '请选择要删除的采购单',
        })
        return
      }
      let res = await batchDelete(rmData)
      initData()
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      }
    })
    .catch(() => {

    })
}
//编辑路由跳转
function edit(id){
  router.push("/receipt/edit/"+id)
}
//---------------生命周期---------------
let user = {}
onMounted(() => {
  initData()
  user = getUser()
})
</script>

<template>
  <div>
    <!--  采购列表  -->
    <div
      style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
      <span style="font-size: 12px;margin-left: 20px;">筛选查询</span>
    </div>
    <div style="background-color: #FFFFFF"><br>
      <div style="margin-left: 40px;margin-top: -15px;height: 40px">
        <el-input v-model="filters.names" style="width: 240px" placeholder="请输入单据号或客户或备注"/>
        <span style="margin-left: 80px">状态:</span>
        <div style="margin-left: 250px;margin-top: -32px">
          &nbsp;&nbsp;&nbsp;日期：
          <el-date-picker v-model="filters.billDate" type="daterange" range-separator="To" start-placeholder="开始时间"
                          end-placeholder="结束时间" value-format="YYYY-MM-DD"/>
          <el-button style="margin-left: 20px" @click="initData()">查询结果</el-button>
        </div>
      </div>
    </div>

    <div>
      <div
        style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
        <span style="font-size: 12px;margin-left: 20px">数据列表</span>
        <!--工具条-->
        <div class="toolbar">
          <el-button type="primary" size="small" style="background-color: #60BFAE;border: #60BFAE"
                     @click="router.push({path:'/receipt/save'})">新增付款单
          </el-button>
          <el-button type="primary" size="small" @click="exportExc">导出</el-button>
          <el-button type="primary" size="small" @click="removeById">删除</el-button>
        </div>
      </div>
    </div>
    <!-- 数据列表 -->
    <el-table :data="tableData" style="width: 100%" border stripe @selection-change="removeId">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="billDate" label="单据日期" width="160" header-align="center" align="center" />
      <el-table-column prop="code" label="单据编号" width="220" header-align="center" align="center" />
      <el-table-column prop="supplierName" label="客户" width="140" header-align="center" align="center" />
      <el-table-column prop="money" label="付款金额" width="140" header-align="center" align="center" />
      <el-table-column prop="user" label="制单人" width="140" header-align="center" align="center" />
      <el-table-column prop="note" label="备注" width="240" header-align="center" align="center" />
      <el-table-column label="操作" header-align="center" align="center">
        <template v-slot="{row}">
          <span class="btn" @click="edit(row.id)">编辑</span>
          <span class="btn" @click="deletePur(row)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:40px auto; width: 500px;">
      <el-pagination background @current-change="chgpg" @size-change="chg" :page-size="pageSize"
                     :page-sizes="[10,20,30,40,50,100]" layout="total,sizes,prev, pager, next,jumper" :total="total" />
    </div>
  </div>
</template>

<style scoped>
.btn {
  color: #3399FF;
  margin-left: 10px;
  cursor: pointer;
}

.toolbar {
  float: right;
}
</style>
